<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./css/index/index.css">
    <script src="./public/jQuery.min.js"></script>
    <link rel="stylesheet" href="./public/swiper-bundle.min.css">
    <!-- jq -->
    <script src="./public/jQuery.min.js"></script>
    <!-- jq -->
    <title>首页</title>
</head>

<body>
    <div id="index">
        <div class="header">
            <header></header>
            <div class="searcho">
                <div class="seacontent">
                    <input type="text" placeholder="输入你想去的地方" class="seainput">
                    <button class="seabut">
                        <img src="./img/pcindex/search.png" alt="" class="seabutimg">
                        <p class="seatit"><a href="#">搜索</a></p>
                    </button>
                </div>
            </div>
        </div>
        <div class="index">
            <!-- 热门活动 -->
            <div class="activeo">
                <div class="titlebox">
                    <p class="title-tit">
                        热门活动
                    </p>
                    <p class="title-p">
                        ACTIVITIES
                    </p>
                </div>
                <div class="actbutbox">
                    <button class="tab-button active" data-tab="tab1" onclick="openTab('tab1')">房车露营</button>
                    <button class="tab-button" data-tab="tab2" onclick="openTab('tab2')">森林氧吧</button>
                    <button class="tab-button" data-tab="tab3" onclick="openTab('tab3')">定制旅行</button>
                    <button class="tab-button" data-tab="tab4" onclick="openTab('tab4')">营友聚会</button>
                    <button class="tab-button" data-tab="tab5" onclick="openTab('tab5')">其他</button>
                </div>
                <!-- 选项卡内容 -->
                <!-- one -->
                <div class="tab" id="tab1">
                    <div class="actimgbox">
                        <div class="actimg">
                            <img src="./img/pcindex/actone.png" alt="">
                        </div>
                        <div class="actimg">
                            <img src="./img/pcindex/actone.png" alt="">
                        </div>
                        <div class="actimg">
                            <img src="./img/pcindex/actone.png" alt="">
                        </div>
                        <div class="actimg">
                            <img src="./img/pcindex/acttwo.png" alt="">
                        </div>
                    </div>
                </div>
                <!-- two -->
                <div class="tab" id="tab2">
                    <div class="actimgbox">
                        <div class="actimg">
                            <img src="./img/pcindex/acttwo.png" alt="">
                        </div>
                        <div class="actimg">
                            <img src="./img/pcindex/acttwo.png" alt="">
                        </div>
                        <div class="actimg">
                            <img src="./img/pcindex/acttwo.png" alt="">
                        </div>
                        <div class="actimg">
                            <img src="./img/pcindex/acttwo.png" alt="">
                        </div>
                    </div>
                </div>
                <!-- three -->
                <div class="tab" id="tab3">
                    <div class="actimgbox">
                        <div class="actimg">
                            <img src="./img/pcindex/actthree.png" alt="">
                        </div>
                        <div class="actimg">
                            <img src="./img/pcindex/actthree.png" alt="">
                        </div>
                        <div class="actimg">
                            <img src="./img/pcindex/actthree.png" alt="">
                        </div>
                        <div class="actimg">
                            <img src="./img/pcindex/actthree.png" alt="">
                        </div>
                    </div>
                </div>
                <!-- four -->
                <div class="tab" id="tab4">
                    <div class="actimgbox" id="tab1">
                        <p class="nobox">无数据....</p>
                        <!-- <div class="actimg">
                            <img src="./img/pcindex/actone.png" alt="">
                        </div>
                        <div class="actimg">
                            <img src="./img/pcindex/actone.png" alt="">
                        </div>
                        <div class="actimg">
                            <img src="./img/pcindex/actone.png" alt="">
                        </div>
                        <div class="actimg">
                            <img src="./img/pcindex/actone.png" alt="">
                        </div> -->
                    </div>
                </div>
                <!-- five -->
                <div class="tab" id="tab5">
                    <div class="actimgbox" id="tab1">
                        <div class="actimg">
                            <img src="./img/pcindex/acttwo.png" alt="">
                        </div>
                        <div class="actimg">
                            <img src="./img/pcindex/acttwo.png" alt="">
                        </div>
                        <div class="actimg">
                            <img src="./img/pcindex/acttwo.png" alt="">
                        </div>
                        <div class="actimg">
                            <img src="./img/pcindex/acttwo.png" alt="">
                        </div>
                    </div>
                </div>
                <!-- 选项卡内容 -->
            </div>
            <!-- 热门活动 -->
            <!-- 目的地 -->
            <div class="bourn">
                <div class="titlebox">
                    <p class="title-tit">
                        推荐的目的地
                    </p>
                    <p class="title-p">
                        ACTIVITIES
                    </p>
                </div>
                <!-- 目的地选项卡内容 -->
                <div class="rolltab" id="rolltab1">
                    <div class="bouimgbox">
                        <img src="./img/pcindex/bgimg2.png" alt="" class="lala">
                        <div class="overlay">
                            <div class="ovetit"><a href="#">开启你的梦想之旅吧</a></div>
                        </div>
                    </div>
                </div>
                <!-- two -->
                <div class="rolltab" id="rolltab2">
                    <div class="bouimgbox">
                        <img src="./img/pcindex/bgimg.png" alt="" class="lala">
                        <div class="overlay">
                            <div class="ovetit"><a href="#">开启你的梦想之旅吧</a></div>
                        </div>
                    </div>
                </div>
                <!-- three -->
                <div class="rolltab" id="rolltab3">
                    <div class="bouimgbox">
                        <p class="bounobox">无数据....</p>
                        <!-- <img src="./img/pclogin/bgimg.png" alt="" class="lala">
                        <div class="overlay">
                            <div class="ovetit"><a href="#">开启你的梦想之旅吧</a></div>
                        </div> -->
                    </div>
                </div>
                <!-- four -->
                <div class="rolltab" id="rolltab4">
                    <div class="bouimgbox">
                        <img src="./img/commend/bgimg.png" alt="" class="lala">
                        <div class="overlay">
                            <div class="ovetit"><a href="#">开启你的梦想之旅吧</a></div>
                        </div>
                    </div>
                </div>
                <!-- 目的地选项卡内容 -->
                <!-- 目的按钮 -->
                <div class="boubutbox">
                    <button class="bountbut active" data-tab="rolltab1" onclick="openroll('rolltab1')">佛手湖畔</button>
                    <button class="bountbut" data-tab="rolltab2" onclick="openroll('rolltab2')">紫金山</button>
                    <button class="bountbut" data-tab="rolltab3" onclick="openroll('rolltab3')">浦口区</button>
                    <button class="bountbut" data-tab="rolltab4" onclick="openroll('rolltab4')">泰山区</button>
                </div>
                <!-- 目的按钮 -->
            </div>
            <!-- 目的地 -->
            <!-- 新闻 -->
            <div class="news">
                <div class="titlebox">
                    <p class="title-tit">
                        推荐的目的地
                    </p>
                    <p class="title-p">
                        ACTIVITIES
                    </p>
                </div>
                <div class="newscontent">
                    <div class="newsbox">
                        <p class="newsp"><a href="#">看得到的品质，看不见的用心看得到的品质，看不见的用心看得到的品质，看不见的用心看得到的品质，看不见的用心</a></p>
                        <img src="./img/pcindex/bgimgsmall.png" alt="" class="newsimg">
                        <p class="newstext"><a href="#">建站之星是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。建站之星是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入</a></p>
                    </div>
                    <div class="newsbox">
                        <p class="newsp"><a href="#">看得到的品质，看不见的用心</a></p>
                        <img src="./img/pcindex/bgimgsmall.png" alt="" class="newsimg">
                        <p class="newstext"><a href="#">建站之星是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。</a></p>
                    </div>
                    <div class="newsbox">
                        <p class="newsp"><a href="#">看得到的品质，看不见的用心</a></p>
                        <img src="./img/pcindex/bgimgsmall.png" alt="" class="newsimg">
                        <p class="newstext"><a href="#">建站之星是一款简单、便捷的工具，可以帮助您制作响应式网站。我们的网站构建器，将传统的编码工作转化为直观的拖拽操作和文字录入。</a></p>
                    </div>
                </div>
            </div>
            <!-- 新闻 -->
            <!-- 营友圈 -->
            <div class="firendcircle">
                <div class="titlebox">
                    <p class="title-tit">
                        营友圈
                    </p>
                    <p class="title-p">
                        ACTIVITIES
                    </p>
                </div>
                <div class="fcbox">
                    <div class="fcleft">
                        <div class="fcleftimg">
                            <img src="./img/pcindex/touxiang.png" alt="">
                        </div>
                    </div>
                    <div class="fcright">
                        <div class="fcrtop">
                            <div class="fcintro">
                                <p class="fcname">王怀泳</p>
                                <p class="fctime">17个小时前</p>
                            </div>
                            <button id="followButton1" class="guan">+ 关注</button>
                        </div>
                        <p class="fctext">
                            大咖个人简介，喜欢到尚未开发的野地露营，有着三年露营经验，最擅长用最少的消耗搭建最完美的营地 大咖个人简介，喜欢到尚未开发的野地露营，有着三年露营经验，最擅长用最少的消耗搭建最完美的营地 大咖个人简介，喜欢到尚未开发的野地露营，有着三年露营经验，最擅长用最少的消耗搭建最完美的营地
                        </p>
                        <div class="fcrbot">
                            <div class="zan" id="shareButton1">
                                <img src="./img/telindex/fenxiang.png" alt="">
                                <p id="shareCount1">456</p>
                            </div>
                            <div class="zan">
                                <img src="./img/telindex/pinglun.png" alt="">
                                <p>777</p>
                            </div>
                            <div class="zan" id="likeButton1">
                                <img src="./img/telindex/dianzan.png" alt="">
                                <p id="likeCount1">888</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="fcbox">
                    <div class="fcleft">
                        <div class="fcleftimg">
                            <img src="./img/pcindex/bgimg.png" alt="">
                        </div>
                    </div>
                    <div class="fcright">
                        <div class="fcrtop">
                            <div class="fcintro">
                                <p class="fcname">王怀泳</p>
                                <p class="fctime">17个小时前</p>
                            </div>
                            <button id="followButton2" class="guan">+ 关注</button>
                        </div>
                        <p class="fctext">
                            大咖个人简介，喜欢到尚未开发的野地露营，有着三年露营经验，最擅长用最少的消耗搭建最完美的营地
                        </p>
                        <div class="fcrbot">
                            <div class="zan" id="shareButton2">
                                <img src="./img/telindex/fenxiang.png" alt="">
                                <p id="shareCount2">456</p>
                            </div>
                            <div class="zan">
                                <img src="./img/telindex/pinglun.png" alt="">
                                <p>777</p>
                            </div>
                            <div class="zan" id="likeButton2">
                                <img src="./img/telindex/dianzan.png" alt="">
                                <p id="likeCount2">888</p>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 营友圈 -->
            <!-- 装备 -->
            <div class="equip">
                <div class="titlebox">
                    <p class="title-tit">
                        找装备
                    </p>
                    <p class="title-p">
                        ACTIVITIES
                    </p>
                </div>
                <div class="equipbox">
                    <swiper></swiper>
                </div>
            </div>
            <!-- 装备 -->
        </div>
        <div class="footer">
            <footer></footer>
        </div>
    </div>

    <script>
        // 分享
        // 获取元素
        var shareButton1 = document.getElementById('shareButton1');
        var shareCountElement1 = document.getElementById('shareCount1');
        var shareButton2 = document.getElementById('shareButton2');
        var shareCountElement2 = document.getElementById('shareCount2');

        // 初始化分享计数
        var shareCount1 = 456;
        var shareCount2 = 456;

        // 点击分享按钮时执行的操作
        shareButton1.addEventListener('click', function () {
            // 增加分享计数
            shareCount1++;
            // 更新分享计数显示
            shareCountElement1.textContent = shareCount1;
            alert('分享成功！')
        });
        shareButton2.addEventListener('click', function () {
            // 增加分享计数
            shareCount2++;
            // 更新分享计数显示
            shareCountElement2.textContent = shareCount2;
            alert('分享成功！')
        });
        // 分享


        // 关注
        // 获取按钮元素
        var followButton1 = document.getElementById('followButton1');
        var followButton2 = document.getElementById('followButton2');
        var guan = document.getElementsByClassName('.guan');

        // 初始状态为未关注
        var isFollowing1 = false;
        var isFollowing2 = false; // 假设第二个按钮初始状态是已关注

        // 设置按钮文本和点击事件处理程序
        function toggleFollowStatus1() {
            if (isFollowing1) {
                followButton1.textContent = '+ 关注';
                isFollowing1 = false;
            } else {
                followButton1.textContent = '已关注';
                isFollowing1 = true;
            }
        }

        function toggleFollowStatus2() {
            if (isFollowing2) {
                followButton2.textContent = '+ 关注';
                isFollowing2 = false;
            } else {
                followButton2.textContent = '已关注';
                isFollowing2 = true;
            }
        }

        // 初始时添加点击事件处理程序
        followButton1.addEventListener('click', toggleFollowStatus1);
        followButton2.addEventListener('click', toggleFollowStatus2);
        // 关注

        // 点赞
        // 获取元素
        var likeCountElement1 = document.getElementById('likeCount1');
        var likeButton1 = document.getElementById('likeButton1');

        var likeCountElement2 = document.getElementById('likeCount2');
        var likeButton2 = document.getElementById('likeButton2');

        // 初始化状态
        var isLiked1 = false;
        var likeCount1 = 888;

        var isLiked2 = false;
        var likeCount2 = 888;

        // 设置初始显示
        likeCountElement1.textContent = likeCount1;
        likeCountElement2.textContent = likeCount2;

        // 点击按钮1时的事件处理程序
        likeButton1.addEventListener('click', function () {
            if (isLiked1) {
                likeCount1--;
                likeCountElement1.style.color = '#A4A4A4';
            } else {
                likeCount1++;
                likeCountElement1.style.color = 'red';
            }

            isLiked1 = !isLiked1;
            likeCountElement1.textContent = likeCount1;
        });

        // 点击按钮2时的事件处理程序
        likeButton2.addEventListener('click', function () {
            if (isLiked2) {
                likeCount2--;
                likeCountElement2.style.color = '#A4A4A4';
            } else {
                likeCount2++;
                likeCountElement2.style.color = 'red';
            }

            isLiked2 = !isLiked2;
            likeCountElement2.textContent = likeCount2;
        });
        // 点赞


        // 头部尾部
        $(function () {
            $("header").load("./components/header.html")
            $("footer").load("./components/footer.html")
            $("swiper").load("./components/swiper.html")
        });
        // 头部尾部
        // 选项卡切换1
        function openTab(tabName) {
            var tabs = document.getElementsByClassName("tab");
            for (var i = 0; i < tabs.length; i++) {
                tabs[i].style.display = "none";
            }

            var buttons = document.getElementsByClassName("tab-button");
            for (var i = 0; i < buttons.length; i++) {
                buttons[i].classList.remove("active");
            }

            document.getElementById(tabName).style.display = "block";
            document.querySelector(".tab-button[data-tab='" + tabName + "']").classList.add("active");
        }
        // 初始显示第一个选项卡
        openTab("tab1");

        // 选项卡切换1


        // 选项卡切换2
        function openroll(tabName) {
            var rolltabs = document.getElementsByClassName("rolltab");
            for (var i = 0; i < rolltabs.length; i++) {
                rolltabs[i].style.display = "none";
            }

            var rollbuttons = document.getElementsByClassName("bountbut");
            for (var i = 0; i < rollbuttons.length; i++) {
                rollbuttons[i].classList.remove("active");
            }

            document.getElementById(tabName).style.display = "block";
            document.querySelector(".bountbut[data-tab='" + tabName + "']").classList.add("active");
        }
        // 初始显示第一个选项卡
        openroll("rolltab1");
        // 选项卡切换2
    </script>
</body>

</html>
